<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #000;
            height: 500px
        }

        #box {
            width: 133px;
            height: 200px;
            background: #fff0;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -75px;
            margin-top: -200px;
            transform: perspective(800px) rotateX(-10deg);
            transform-style: preserve-3d;
        }

        #box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(img2/1.jpg) no-repeat;
            transition: 1s all ease;
            border-radius: 5px;
            box-shadow: 0 0 10px #fff;
        }

        #box div span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(img2/1.jpg) no-repeat;
            transform-origin: center bottom;
            transform: translateY(50px) scale(1, -3);
            -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5));
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <a href="https://www.jq22.com/webqd3023">实例</a>

    <div id="box"> </div>

    <script>
        window.onload = function () {
            var oBox = document.getElementById('box');
            var N = 11;

            for (var i = 0; i < N; i++) {
                var oDiv = document.createElement('div');
                oDiv.style.backgroundImage = 'url(http://www.jq22.com/img/cs/300x500-' + 3 + '.png)';
                oBox.appendChild(oDiv);

                //倒影的添加
                oDiv.innerHTML = '<span></span>';
                oDiv.children[0].style.backgroundImage = 'url(http://www.jq22.com/img/cs/300x500-' + 3 + '.png)';

                ; (function (oDiv, i) {
                    setTimeout(function () {
                        oDiv.style.transform = 'rotateY(' + 360 / N * i + 'deg) translateZ(280px)';
                    }, 200 * (N - i));
                })(oDiv, i);
            }

            //键盘控制
            var y = 0;
            var x = 0;

            var lastY = 0;
            var iSpeedY = 0;
            var lastX = 0;
            var iSpeedX = 0;

            var timer = null;

            oBox.children[0].addEventListener('transitionend', function () {
                keyControl();
                mouseControl();
            }, false);

            function mouseControl() {
                oBox.onmousedown = function (ev) {
                    clearInterval(timer);
                    iSpeedY = 0;
                    iSpeedX = 0;

                    for (var i = 0; i < oBox.children.length; i++) {
                        oBox.children[i].style.transition = 'none';
                    }

                    var disY = ev.clientX - y;
                    var disX = ev.clientY - x;

                    document.onmousemove = function (ev) {
                        y = ev.clientX - disY;
                        x = ev.clientY - disX;

                        change(y);

                        iSpeedY = ev.clientX - lastY;
                        iSpeedX = ev.clientY - lastX;

                        lastY = ev.clientX;
                        lsatX = ev.clientY;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;

                        if (y == 0 || x == 0) return;
                        timer = setInterval(function () {
                            iSpeedY *= 0.95;
                            iSpeedX *= 0.95;

                            y += iSpeedY;
                            x += iSpeedX;
                            change(y);
                        }, 30);
                    };
                    return false;
                };
            }


            function keyControl() {
                document.onkeydown = function (ev) {
                    var oEvent = ev || event;
                    if (oEvent.keyCode == 37) {
                        clearInterval(timer);
                        for (var i = 0; i < oBox.children.length; i++) {
                            oBox.children[i].style.transition = '1s all ease';
                        }
                        y -= 360 / N;
                        change(y);
                    }
                    if (oEvent.keyCode == 39) {
                        y += 360 / N;
                        change(y);
                    }
                };
            }

            function change(y) {
                for (var i = 0; i < oBox.children.length; i++) {

                    oBox.children[i].style.transform = 'rotateY(' + (360 / N * i + y) + 'deg) translateZ(280px)';

                    var s = Math.abs((360 / N * i + y) % 360);

                    s > 180 && (s = 360 - s);

                    s = 180 - s;

                    var scale = s / 180;
                    //oBox.children[i].innerHTML=s;
                    oBox.children[i].style.opacity = scale;
                }
            }
        };
    </script>
</body>

</html>